<template>
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
		<view class="conter header-card">
			<view class="u-money">
				{{$t('withdrawal')}}
				<text class="money number">{{Item.money}}</text>
				{{configInfo.money_company}}
				<text class="text-danger" v-if="Item.state == 3">（{{$t('withdrawal_detail.fail-return')}}）</text>
			</view>
			<u-steps :current="current" activeColor="#36b368" class="number" dot>
				<u-steps-item :title="$t('withdrawal_detail.wait-audit')" :desc="Item.create_time"></u-steps-item>
				<u-steps-item :title="currentTitle" :error="currentError" :desc="Item.update_time"></u-steps-item>
			</u-steps>
		</view>
		<view class="conter" v-if="Item.state == 3 && Item.remark">
			<u-alert :title="$t('withdrawal_detail.fail-audit')" type="error" :description="Item.remark"></u-alert>
		</view>
		<view class="conter">
			<u-cell-group>
				<u-cell :isLink="false">
					<text slot="title" class="cell-title">{{$t('withdrawal_detail.order-num')}}</text>
					<view slot="value" class="cell-value">
						<view class="flex-start number">
							<text>{{Item.order_num}}</text>
							<i-icon name="file-copy-2-line" size="16px" color="#888" @click="$util.copyText(Item.order_num)"></i-icon>
						</view>
					</view>
				</u-cell>
				
				<u-cell :isLink="false">
					<text slot="title" class="cell-title">{{$t('withdrawal_detail.mode')}}</text>
					<view slot="value" class="cell-value" @click="payMethodShow = true">
						<view class="flex-start number">
							<text>{{Item.pay_method_text}}</text>
							<i-icon name="eye-line" size="16px" color="#888" @click="payMethodShow = true"></i-icon>
						</view>
					</view>
				</u-cell>
				
				<u-cell :isLink="false">
					<text slot="title" class="cell-title">{{$t('withdrawal_detail.fee')}}</text>
					<view slot="value" class="cell-value">
						<text class="number">{{Item.fee}} {{configInfo.money_company}}</text>
					</view>
				</u-cell>
				
				<u-cell :isLink="false" v-if="Item.state == 1">
					<text slot="title" class="cell-title">{{$t('withdrawal_detail.estimate-money')}}</text>
					<view slot="value" class="cell-value">
						<text class="number">{{$util.handleStr($t('withdrawal_detail.estimate-money-tips'),configInfo.with_timer)}}</text>
					</view>
				</u-cell>
				
				<u-cell :isLink="false" v-if="Item.state == 2" @click="payMoneyShow = true">
					<text slot="title" class="cell-title">{{$t('withdrawal_detail.reality-money')}}</text>
					<view slot="value" class="cell-value">
						<view class="flex-start">
							<u--text type="success" mode="price" :text="Item.pay_money"></u--text>
							<i-icon name="question-line" size="16px" color="#999" ></i-icon>
						</view>
					</view>
				</u-cell>
				
			</u-cell-group>
		</view>
		<!-- 了解实际到账金额提示框 -->
		<m-modal
			:show="payMoneyShow" 
			:content="$t('withdrawal_detail.reality-money-modal-content')"
			@close="payMoneyShow = false"
		>
		</m-modal>

		<m-modal 
			:show="payMethodShow" 
			:title="Item.pay_method_text"
			@close="payMethodShow = false"
		>
			<view class="slot-content">
				<!-- 收款码 -->
				<view class="slot-content_prview p-t-md p-b-md" v-if="Item.pay_method == 1 && Item.pay_info.code">
					<image :src="Item.pay_info.code" mode="widthFix" style="width: 100%;"></image>
				</view>
				<!-- 微信或者支付宝 -->
				<view class="slot-content_form text-sm" v-if="Item.pay_method == 2 || Item.pay_method == 3">
					<view class="form-item" v-if="Item.pay_info.realname">
						<view class="form-item_label">
							<view class="flex-between">
								<text class="form-item__title">{{$t('withdrawal_detail.info-username')}}</text>
								<text class="form-item__value">
									{{ Item.pay_info.realname }}
								</text>
							</view>
						</view>	
					</view>
					<view class="form-item" v-if="Item.pay_info.alipayid">
						<view class="form-item_label">
							<view class="flex-between">
								<text class="form-item__title">{{$t('withdrawal_detail.info-account')}}</text>
								<text class="form-item__value">
									{{ Item.pay_info.alipayid }}
								</text>
							</view>
						</view>	
					</view>
					<view class="form-item" v-if="Item.pay_info.wxpayid">
						<view class="form-item_label">
							<view class="flex-between">
								<text class="form-item__title">{{$t('withdrawal_detail.info-account')}}</text>
								<text class="form-item__value">
									{{ Item.pay_info.wxpayid }}
								</text>
							</view>
						</view>	
					</view>
				</view>
			</view>
		</m-modal>
		<u-loading-page :loading="pageLoading"></u-loading-page>
		
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				Id:'',
				Item:[],
				current:0,
				currentError:false,
				currentTitle:this.$t('withdrawal_detail.submit-success'),
				payMethod:this.$t('withdrawal.mode-code'),
				onMoney:'0.00',
				cacheKey:'with_detail_',
				pageLoading:true,
				payMoneyShow:false,
				payMethodShow:false,
				scrollTop:0
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
		}),

		async onLoad(option) {
			this.Id = option.id;

			// 设置缓存KEY
			this.cacheKey = this.cacheKey + option.id;
			
			//获取缓存数据
			let cacheData = this.$util.getCache(this.cacheKey, true)
			this.Item = cacheData || ''
		},
		onReady(){
			// if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		/* 页面显示 */
		async onShow(){
			this.getInfo();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 右上角点击
		// onNavigationBarButtonTap(){
		// 	this.Common._jump('withdrawal/withdrawal')
		// },
		
		methods: {
			
			async getInfo(){
				// if(!this.Id)return;
				let res = await this.$api.user.getWithInfo(this.Id)
				if(res.code == 200){
					this.Item = res.data
					this.$util.setCache(this.cacheKey, res.data, 60, true)
					// this.$util.addCache(this.cacheKey,res.data,{is_user:true})
					this.pageLoading = false;
				}
				if(res.code == 2004 || res.code == 2005){
					// 数据不存在或无权限
					this.$util.goNavigateBack();
				}
				this.setCurrent();
			},
			
			setCurrent(){
				if(this.Item.state == 1){
					this.current = 0;
				};
				if(this.Item.state == 2){
					this.current = 1;
				};
				if(this.Item.state == 3){
					this.currentTitle = this.$t('withdrawal_detail.submit-fail');
					this.currentError = true;
					this.current = 1;
				}
			},
			lookPayMethod(){
				// alert('123')
				// alert('123');
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F3F3F3;
	}
	.header-card{
		background-color: #fff;
		padding-bottom: 15px;
	}
	.header-card .u-money{
		font-size: $contentSize;
		text-align: center;
		padding: 30px 0;
		.money{
			font-size: 30px;
			font-weight: bold;
			color: var(--main-color-2);
			margin: 0 5px;
		}
	}
	/deep/ .u-steps-item .u-text{
		justify-content:center!important
	}

	.cell-title{
		font-weight: 400;
	}
	.i-icon{
		margin-left: 3px;
		display: flex;
	}
	.slot-content{
		.form-item{
			padding: 30rpx;
			border-bottom: 1px solid #eee;
			&__title{
				color: #333;
			}
			&__value{
				color: #888;
			}
		}
		.form-item:last-child{
			border-bottom: none;
		}
	}
</style>
